<template>
  <el-dialog
      v-model="dialogVisible"
      title="销售单详情"
      width="900px"
      :before-close="handleClose"
      class="SalesOrderDetail"
  >
    <!-- 可打印区域（屏幕展示仍为原布局） -->
    <el-form :model="detail" label-width="120px" class="SalesOrderDetail-form" disabled>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="订单编号">
            <el-input :model-value="detail.orderNo" class="SalesOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户">
            <el-input :model-value="detail.customerName" class="SalesOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="下单日期">
            <el-input :model-value="detail.orderDate" class="SalesOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input :model-value="detail.note || '-'" class="SalesOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="detail.items || []" border stripe class="SalesOrderDetail-table">
      <el-table-column type="index" label="序号" width="60" align="center"/>
      <el-table-column prop="code" label="商品编码" min-width="120" align="center"/>
      <el-table-column prop="name" label="商品名称" min-width="160" align="center"/>
      <el-table-column prop="unit" label="单位" width="100" align="center"/>
      <el-table-column prop="quantity" label="数量" width="120" align="center"/>
      <el-table-column prop="unitPrice" label="单价(¥)" width="120" align="center">
        <template #default="{row}">{{ formatMoney(row.unitPrice) }}</template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="小计(¥)" width="140" align="center">
        <template #default="{row}">{{ formatMoney(row.totalPrice) }}</template>
      </el-table-column>
    </el-table>

    <div class="SalesOrderDetail-summary">
      <div class="SalesOrderDetail-summary-row">
        <div class="SalesOrderDetail-summary-label">合计金额：</div>
        <div class="SalesOrderDetail-summary-value">¥ {{ formatMoney(detail.totalAmount) }}</div>
      </div>
    </div>

    <template #footer>
      <div class="SalesOrderDetail-footer">
        <ReceiptPrinter :order="detail" :paper-width="58" />
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref, reactive, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {getSalesOrder} from '../../../../api/salesOrderApi.js'
import ReceiptPrinter from '../../../../components/ReceiptPrinter.vue'

const props = defineProps({visible: {type: Boolean, default: false}, orderId: {type: Number, default: null}})
const emits = defineEmits(['update:visible'])
const dialogVisible = ref(false)
const detail = reactive({})

watch(() => props.visible, v => {
  dialogVisible.value = v;
  if (v && props.orderId) loadDetail()
})
watch(dialogVisible, v => { if (!v) emits('update:visible', false) })

const loadDetail = async () => {
  try {
    const res = await getSalesOrder(props.orderId);
    Object.assign(detail, res || {})
  } catch (e) {
    ElMessage.error('获取详情失败')
  }
}
const handleClose = () => dialogVisible.value = false
const formatMoney = v => Number(v || 0).toFixed(2)
</script>
<style scoped lang="scss">
.SalesOrderDetail {
  &-form { padding: 16px 0; &-input { width: 100%; } }
  &-table { width: 100%; margin-top: 8px; }
  &-summary { display: flex; justify-content: flex-end; padding: 16px 0; &-row { display:flex; gap:8px; align-items:center; } &-label{ font-size:14px; color:#606266;} &-value{ font-size:16px; font-weight:600; color:#303133;} }
  &-footer { display:flex; justify-content:flex-end; gap:8px; }
}
</style>
